<template>
  <div class="container learnstyle-page">
    <el-row class="grid-head"></el-row>
    <el-row>
      <div>
        <div class="subject">
          <div id="nav">
            <!-- <a @click="selectSubject(null)" :class="selectId === 0 ? 'on' : ''"
              >全部</a
            >
            <a
              v-for="subject in studentSubjectList"
              :key="subject.id"
              :class="subject.id === selectId ? 'on' : ''"
              @click="selectSubject(subject)"
              >{{ subject.name }}</a
            > -->
          </div>
        </div>

        <div class="exam_list">
          <el-card
            v-show="hasTestPaperInfo"
            v-for="(testPaper, index) in testPaperList"
            :key="index"
            class="box-card"
          >
            <div slot="header" class="clearfix">
              <span>{{ testPaper.name }}</span>
            </div>
            <div class="text item">
              科目： <el-tag>{{ testPaper.subjectName }}</el-tag>
            </div>

            <div class="text item">
              试题数量： {{ testPaper.questionNumber }}题
            </div>

            <div class="text item">总分： {{ testPaper.mark }}分</div>

            <div class="text item">考试时间： {{ testPaper.examTime }}分钟</div>

            <!-- <div class="text item">参考人数： {{ testPaper.examNumber }}人</div> -->

            <div class="text item">开始时间： {{ taskStartTime }}</div>

            <div style="border-bottom: 1px solid #ebeef5" class="text item">
              结束时间： {{ taskEndTime }}
            </div>

            <div class="text item">
              <el-button
                @click="openstuUnderDia(testPaper)"
                style="float: right; font-size: 18px"
                type="text"
                >开始考试</el-button
              >
            </div>
          </el-card>
          <!-- 考生须知弹窗 -->

          <el-dialog
            :visible.sync="stuUnderVisible"
            width="30%"
            :before-close="handleClose"
          >
            <h2 class="title" style="text-align: center">考生须知</h2>
            <br />

            <p>
              1.考生应按规定的时间入场，开始考试后15分钟禁止迟到考生进入考场。
            </p>
            <p>
              2.考生入场时须主动出示《准考证》以及有效身份证件(身份证、军人、武警人员证件、未成年人的户口本、公安户籍部门开具的《身份证》号码证明、护照或者港、澳、台同胞证件)，接受考试工作人员的核验，并按要求在“考生花名册”上签自己的姓名。
            </p>
            <p>
              3.考生只准携带必要的文具入场,如铅笔、签字笔、毛笔、水粉水彩颜料等，具体要求见招考简章。禁止携带任何已完成作品以及各种无线通信工具(如寻呼机、移动电话)等物品。如发现考生携带以上禁带物品，考生将作为违纪处理，取消该次考试成绩。考场内不得擅自相互借用文具。
            </p>
            <p>
              4.考生入场后按号入座，将本人《准考证》以及有效身份证件放在课桌上，以便核验。
            </p>
            <span slot="footer" class="dialog-footer">
              <el-button @click="stuUnderVisible = false">取 消</el-button>
              <el-button @click="startExam(testPaper)">开始考试</el-button>
            </span>
          </el-dialog>

          <el-card v-if="!hasTestPaperInfo" class="no_data">
            <i class="el-icon-takeaway-box"></i> 暂无考试信息
          </el-card>
        </div>
      </div>
    </el-row>

    <div class="block">
      <el-pagination
        background
        v-if="totalCount > pageSize"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import questionInfo from "@/components/question-info";

export default {
  name: "exam",
  components: { questionInfo },

  data() {
    return {
      hasTestPaperInfo: true,
      selectId: 0,
      testPaperList: [],
      studentSubjectList: [],
      currentPage: 1,
      pageSize: 9,
      totalCount: 0,
      subjectId: "",
      testPaper: {}, //保存试卷
      stuUnderVisible: false, //考生须知
      testPaper: "",
      taskStartTime: null, //任务开始时间
      taskEndTime: null, //任务结束时间
      currentTime: null, //当前时间
    };
  },

  mounted() {
    this.startDate = new Date().getTime();
    this.getStudentSubjectList();
    this.getTestPaperList();
    this.getExamTask()
  },

  destroyed() {},

  methods: {
    //2021.11.16 获取当前时间
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      this.currentTime = _this.gettime;
      // console.log("当前时间", this.currentTime);
    },
    openstuUnderDia(item) {
      // console.log("item:", item);
      this.stuUnderVisible = true;
      this.testPaper = item;
    },
    //考生须知对话框关闭
    handleClose(done) {
      done();
    },

    selectSubject(subject) {
      if (subject) {
        this.selectId = subject.id;
        this.subjectId = subject.id;
      } else {
        this.selectId = 0;
        this.subjectId = "";
      }
      this.getTestPaperList();
    },

    //获取考试列表
    getTestPaperList() {
      this.axios
        .get(this.$httpApi.httpUrl("/student/testPaperInfo/list"), {
          params: {
            pageNumber: this.currentPage,
            pageSize: this.pageSize,
            subjectId: this.subjectId,
          },
        })
        .then((response) => {
          // console.log("哈哈哈哈哈" , response)
          this.testPaperList = response.data.data.dataList;
          if (this.testPaperList.length === 0) {
            this.hasTestPaperInfo = false;
          } else {
            this.hasTestPaperInfo = true;
          }
          this.totalCount = response.data.data.total;
        });
    },

    //获取任务信息
    getExamTask() {
      this.axios
        .get(this.$httpApi.httpUrl(`/exam/selectByIdExamTask`))
        .then((response) => {
          this.taskStartTime = response.data.data.startTime;
          this.taskEndTime = response.data.data.endTime;
          // console.log("开始时间", this.taskStartTime);
          // console.log("结束时间", this.taskEndTime);
        });
    },

    // 获取学员学习科目
    getStudentSubjectList() {
      this.axios
        .get(
          this.$httpApi.httpUrl("/student/subjectInfo/selectByGradeInfoId"),
          {
            params: {},
          }
        )
        .then((response) => {
          this.studentSubjectList = response.data.data;
        });
    },

    //确定开始考试弹窗
    startExam(testPaperInfo) {
      this.getCurrentTime();
      if (
        this.currentTime >= this.taskStartTime &&
        this.currentTime < this.taskEndTime
      ) {
        this.$message.success("考试已经开始，请开始答题");
        this.$store.commit("common/updateTestPaperInfo", testPaperInfo);
        this.$router.push({ name: "stuhome" });
      } else if (this.currentTime < this.taskStartTime) {
        this.$message("考试时间未到，请耐心等待");
      } else {
        this.$message("考试时间已经结束，无法再继续考试答题");
      }
      // this.$store.commit("common/updateTestPaperInfo", testPaperInfo);
      // this.$router.push({ name: "stuhome" });
    },
  },
};
</script>

<style>
.el-row .box-card {
  width: 30% !important;
  display: inline-block !important;
  margin: 15px !important;
}
</style>

<style scoped>
.no_data {
  margin-top: 40px;
  line-height: 300px;
  text-align: center;
  font-size: 20px;
  color: rgb(155, 155, 155);
}
.exam_list {
  width: 100%;
  min-height: 300px;
  display: inline-block;
}

.el-pagination {
  margin-top: 25px;
  text-align: center;
}

.subject .on {
  background: rgba(204, 136, 0, 0.1);
  color: #c80;
}

.subject a {
  font-size: 15px;
  line-height: 40px;
  min-width: 60px;
  padding: 0 15px;
  margin-top: 10px;
  margin-right: 25px;
  float: left;
}

.subject a:hover {
  cursor: pointer;
  background: rgba(204, 136, 0, 0.1);
  color: #c80;
}

.paper {
  cursor: pointer;
}
.el-button {
  font-size: 12px;
}
.title {
  font-weight: 700;
  font-size: 16px;
}
.paper a:hover {
  color: #11a68d;
}

.el-table {
  top: 15px;
}

.top .item {
  margin-left: 20px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 5px;
  padding-bottom: 5px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.grid-head {
  margin-bottom: 30px;
}
.grid-content-right {
  text-align: right;
  color: #24794b;
}
.grid-content-right:hover {
  color: #3a8ee6;
  cursor: pointer;
}
.grid-content-left {
  text-align: left;
  color: #24794b;
}
</style>
